<template>
    <a-layout class="Layout bg">
        <MyHeader logo="智慧绿化系统" :headers="Headers" />

        <a-layout>
            <a-layout>
                <a-layout-content class=".bg-alpha bg">
                    <RouterView></RouterView>
                </a-layout-content>
            </a-layout>
        </a-layout>
    </a-layout>
</template>

<script lang="ts" setup>
import MyHeader from '@/components/Headers/MyHeader.vue';
import { RouterView } from 'vue-router';

const Headers = [
    { to: '/green/index', text: '地图模式' },
    { to: '/green/auto', text: '自动灌溉' },
    { to: '/green/timed', text: '定时灌溉' },
    { to: '/green/circular', text: '循环灌溉' }
];
</script>
<style lang="scss" scoped>
@import '/src/assets/style/bg.scss';

.Layout {
    height: 100vh;
    width: 100%;

    .mysider {
        display: none;
    }
}

#components-layout-demo-top-side-2 .logo {
    float: left;
    width: 120px;
    height: 31px;
    margin: 16px 24px 16px 0;
    background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
    float: right;
    margin: 16px 0 16px 24px;
}

.site-layout-background {
    background: #fff;
}
</style>
